<template>
  <div class="ChatItemAction">
    <c-button v-if="index !== 0 && chatMap.get(currentChat)!.messages[props.value.id!]?.status !== '生成中'"
      @click="retryMessage(props.value.id!)" quaternary circle iconName="RefreshSharp" />
    <c-button v-if="chatMap.get(currentChat)!.messages[props.value.id!]?.status !== '生成中'" @click="editMessage()"
      quaternary circle iconName="EditFilled" />
    <c-button @click="deleteMessage(props.value.id!)" quaternary circle iconName="DeleteForeverFilled" />
    <c-button v-if="chatMap.get(currentChat)!.messages[props.value.id!]?.status === '生成中'"
      @click="stopMessage(props.value.id!)" quaternary circle iconName="StopCircleFilled" />
  </div>
</template>

<script setup lang='tsx'>
import { useDialog } from 'naive-ui'
const dialog = useDialog()
const { chatMap, currentChat } = storeToRefs(chatStore())
const props = defineProps<{
  value: Message,
  index: Number
}>()
const editMessage = () => {
  const content = ref(chatMap.value.get(currentChat.value)!.messages[props.value.id!].content)
  dialog.create({
    title: '修改消息',
    positiveText: '保存',
    negativeText: '取消',
    showIcon: false,
    onPositiveClick: () => {
      chatMap.value.get(currentChat.value)!.messages[props.value.id!].content = content.value
    },
    content: () =>
      <n-input
        showCount
        class="updateMessageInput"
        onInput={(e: string) => { content.value = e }}
        value={content.value}
        type="textarea"
        placeholder="请输入消息内容"
        autosize={{
          minRows: 3,
          maxRows: 20
        }}
      />,
  })
}
const { deleteMessage, stopMessage, retryMessage, } = useMessages()
</script>

<style lang="scss">
.ChatItemAction {
  height: 40px;
  gap: 4px;
  display: flex;
}

.updateMessageInput {
  width: 800px !important;
}
</style>